<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品详情</title>
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_2990434_aaxqpd9w7e8.css"
    />
    <link rel="stylesheet" href="../stylesheets/swiper-bundle.min.css" />
    <link rel="stylesheet" href="../stylesheets/css/shopinfo.css" />
    <script type="module">
      import Swiper from "../javascripts/library/swiper-bundle.esm.browser.min.js";
      var mySwiper = new Swiper(".swiper", {
        slidesPerView: 5,

        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
  </head>
  <body>
    <div class="top-bar">
      <div class="top-box">
        <div class="top-box-left">
          <a href="" class="text-link">帮助中心</a>
          <a href="" class="text-link">收藏</a>
          <a href="" class="text-link">360官网</a>
          <a href="" class="text-link">360智慧生活</a>
        </div>
        <div class="top-box-right">
          <div class="login-box">
            <div class="user-login text-link">登录</div>
            <div class="user-reg text-link">注册</div>
          </div>
          <div class="cart">
            <a href="" class="text-link"
              ><i class="iconfont icon-shop-cart-"></i
            ></a>
            <div class="cart-detail-box">
              <a href="" class="text-link"
                ><i class="iconfont icon-shop-cart-"></i
              ></a>
              <div class="cart-box-text">
                您的购物车还没有商品，赶紧去选购吧！
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="index-header">
      <div class="header clearfix">
        <div class="header-box clearfix">
          <div class="header-left">
            <a href="">
              <i class="logo"></i>
            </a>
            <div class="news">
              <a href="">新品推荐</a>
            </div>
            <div class="hot">
              <a href="">热卖榜单</a>
            </div>
          </div>
          <div class="header-right">
            <div class="search">
              <div class="search-ipt">
                <input type="text" />
              </div>
              <i class="seacrch-icon iconfont icon-search"></i>
            </div>
            <div class="search-list">
              <a href="">记录仪</a>
              <a href="">摄像机</a>
              <a href="">路由器</a>
              <a href="">耳机</a>
              <a href="">扫地机</a>
              <a href="">智能手表</a>
            </div>
          </div>
        </div>
      </div>

      <div class="banner clearfix">
        <div class="category-box">
          <div class="category-item item-all">
            <a href="">
              <i class="iconfont icon-ziyuanxhdpi"></i>
              全部分类
            </a>
          </div>
          <ul class="category-list">
            <li class="list-item">
              <a href="">家庭安防</a>
              <div class="right-wrapper">
                <div class="category-left">
                  <div class="category-level-box">
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item1.webp"
                          alt=""
                          srcset=""
                        />
                        摄像机
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item2.webp"
                          alt=""
                          srcset=""
                        />
                        门铃
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item3.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item3.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item3.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item3.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-item">
              <a href="">安全路由</a>
              <div class="right-wrapper">
                <div class="category-left">
                  <div class="category-level-box">
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item1.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item2.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item3.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-item">
              <a href="">智能手表</a>
              <div class="right-wrapper">
                <div class="category-left">
                  <div class="category-level-box">
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item1.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item2.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item3.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-item">
              <a href="">汽车用品</a>
              <div class="right-wrapper">
                <div class="category-left">
                  <div class="category-level-box">
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item1.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item2.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item3.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-item">
              <a href="">扫地机器人</a>
              <div class="right-wrapper">
                <div class="category-left">
                  <div class="category-level-box">
                    <div class="level-box roobt">
                      <a href="">主机</a>
                      <div class="level-list">
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          X95礼盒版
                        </a>
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          X95礼盒版
                        </a>
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          X95礼盒版
                        </a>
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          X95礼盒版
                        </a>
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          X95礼盒版
                        </a>
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          X95礼盒版
                        </a>
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          X95礼盒版
                        </a>
                      </div>
                    </div>
                    <div class="level-box roobt">
                      <a href=""> 配件 </a>
                      <div class="level-list">
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          **配件
                        </a>
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          **配件
                        </a>
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          **配件
                        </a>
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          **配件
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-item">
              <a href="">影音生活</a>
              <div class="right-wrapper">
                <div class="category-left">
                  <div class="category-level-box">
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item1.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item2.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item3.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-item">
              <a href="">生态产品</a>
              <div class="right-wrapper">
                <div class="category-left">
                  <div class="category-level-box">
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item1.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item2.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item3.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="body-main">
      <div class="prod-intro clearfix">
        <div class="pic">
          <div class="box" id="box">
            <div id="smallBox" class="small">
              <img src="../images/t01192edc41a78ee2ac.webp" alt="" />
              <div id="mask" class="mask"></div>
            </div>
            <div id="bigBox" class="big">
              <img
                src="../images/t01192edc41a78ee2ac.webp"
                id="bigImg"
                width="800"
                alt=""
              />
            </div>
          </div>
          <div class="picbox-thumb">
            <div class="swiper">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="img">
                    <img src="../images/t01192edc41a78ee2ac.webp" alt="" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="img">
                    <img src="../images/2.webp" alt="" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="img">
                    <img src="../images/3.webp" alt="" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="img">
                    <img src="../images/4.webp" alt="" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="img">
                    <img src="../images/5.webp" alt="" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="img">
                    <img src="../images/6.webp" alt="" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="img">
                    <img src="../images/7.webp" alt="" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="img">
                    <img src="../images/8.webp" alt="" />
                  </div>
                </div>
              </div>
              <!-- 如果需要导航按钮 -->
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
            </div>
          </div>

          <div class="feature-box">
            <ul>
              <li class="feature-box-item">
                <img src="../images/true.png" alt="" />360商城发货&售后
              </li>
              <li class="feature-box-item">
                <img src="../images/true.png" alt="" />满99元包邮
              </li>
              <li class="feature-box-item">
                <img src="../images/true.png" alt="" />7天无理由退货
              </li>
              <li class="feature-box-item">
                <img src="../images/true.png" alt="" />15天免费换货
              </li>
            </ul>
          </div>
        </div>
        <div class="info">
          <div class="product-info">
            <div class="info-title">360可视门铃5Pro AR1C</div>
            <div class="sInfo-subtitle">2K超清画质 166°超广视角</div>
            <div class="sInfo-wrap">
              <div class="divider"></div>
              <div class="sInfo-wrap-content">
                <div class="row-box">
                  <div class="row-box-label item-label">价格</div>
                  <div class="pirce">
                    <span class="nowpirce">¥399.00</span>
                    <span class="oldpirce">¥429</span>
                  </div>
                </div>
                <div class="row-box">
                  <div class="row-box-label item-label">领券</div>
                  <div class="row-box-content">
                    <span class="js-coupon-show-more">满99.00减5.00元</span>
                  </div>
                </div>
                <div class="row-box">
                  <div class="row-box-label item-label">促销</div>
                  <div class="row-box-content">
                    <span class="tag">直降</span>
                    <span class="row-box-content">立减 30.00 元</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="info-notice">
            <div class="info-notice-connent">
              物流公告：受疫情影响，北京、上海、黑龙江、吉林、辽宁、河北、江西、江苏、四川、甘肃、青海、新疆、宁夏回族自治区等部分地区暂缓发货。
            </div>
          </div>
          <div class="sInfo-wrap">
            <div class="sInfo-wrap-content">
              <div class="row-box sInfo-cate">
                <div class="cate">
                  <span class="cate-label">分类</span>
                  <ul class="cate-list">
                    <li class="cate-item cur">
                      <a href="">AR1C</a>
                    </li>
                    <li class="cate-item">
                      <a href=""> AR2CCM02 </a>
                    </li>
                    <li class="cate-item">
                      <a href=""> R4PRO-1L43 </a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="product-status">
                <div class="row-box sInfo-num">
                  <div class="row-box-label item-label">数量</div>
                  <div class="sInfo-num-content">
                    <div class="gcIpt">
                      <a href="" class="disabled">-</a>
                      <input type="text" value="1" class="goodsCount" />
                      <a href="">+</a>
                    </div>
                  </div>
                </div>
                <div class="row-box sInfo-num">
                  <div class="row-box-label item-label">积分</div>
                  <div class="sInfo-num-content">
                    <div class="gcIpt">
                      <span
                        >购买可获得399积分 <i class="iconfont icon-zhuyi"></i
                      ></span>
                    </div>
                  </div>
                </div>
                <div class="sInfo-btns">
                  <span>
                    <a href="" class="btn btn-submit btn-buy">立即购买</a>
                    <a href="" class="btn btn-submit btn-liner">加入购物车</a>
                  </span>
                  <div class="btn btn-like">
                    <i class="iconfont icon-aixin"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="gInfo">
        <div class="detail-imgs-box-poster">
          <p>
            <a href="">
              <img src="../images/infopic1.jpg" alt="" />
            </a>
          </p>
          <p>
            <a href="">
              <img src="../images/infopic2.jpg" alt="" />
            </a>
          </p>
        </div>
        <div class="gInfo-tab-wrap">
          <div class="gInfo-tab">
            <div class="content">
              <div class="gInfo-tab-oper">
                <a href="" class="btn btn-submit btn-buy">立即购买</a>
                <a href="" class="btn btn-submit btn-liner">加入购物车</a>
              </div>
              <div class="gInfo-tab-list">
                <a href="" class="nav-item on"
                  ><span class="nav-item-inner">产品详情</span></a
                >
                <a href="" class="nav-item"
                  ><span class="nav-item-inner">规格参数</span></a
                >
                <a href="" class="nav-item"
                  ><span class="nav-item-inner">评价</span></a
                >
                <a href="" class="nav-item"
                  ><span class="nav-item-inner">常见问题</span></a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="gInfo-content">
          <div class="detail-box gCon">
            <div class="detail-imgs-box-cont">
              <p><img src="../images/t0125b736a096df804d.webp" alt="" /></p>
              <p><img src="../images/t0169db1d3dae0d3f95.webp" alt="" /></p>
              <p><img src="../images/t0136070a7ee3a2a529.webp" alt="" /></p>
              <p><img src="../images/t014ce7b552b4a97760.webp" alt="" /></p>
              <p><img src="../images/t013d1fed37a7d3abef.webp" alt="" /></p>
              <div>
                <h3 style="text-align: center">价格说明</h3>
                未划线价：
                <br />
                商品的实时标价，具体成交价格根据商品参加活动或使用优惠券、积分等发生变化，最终以订单结算页价格为准。
                <br />
                划线价：
                <br />
                商品展示的划横线价格为该商品在360商城上曾经展示过的销售价，并非原价。
                <br />
                异常问题：
                <br />
                商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。
                <br />
                *此价格说明仅在有价格对比时有效。
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="helper-footer">
        <div class="footer-box clearfix">
          <div class="helper-box about-box">
            <p class="helper-title">关于商城</p>
            <p class="helper-text">
              360商城是奇虎360公司的官方电商平台，主要经营360安全智能设备，以及相关领域消费品。提供最新的360智能设备，最贴心的售后服务，360社区一手评测资讯，享受360安全、安心、放心的购物体验。
            </p>
            <div class="follow-box">
              <span>关于我们</span>
              <span>
                <a class="iconfont icon-weixin"></a>
                <a class="iconfont icon-xinlangweibo"></a>
              </span>
            </div>
          </div>
          <div class="helper-box link-box">
            <div class="helper-title">售后服务</div>
            <div>
              <a href="">7日无理由退货</a>
              <a href="">质量问题15日内换货 </a>
              <a href="">保修条款</a>
              <a href="">服务流程</a>
              <a href="">许可协议</a>
              <a href="">隐私政策</a>
            </div>
          </div>
          <div class="helper-box link-box">
            <div class="helper-title">帮助中心</div>

            <a href="">用户注册</a>
            <a href="">会员说明</a>
            <a href="">登录与密码找回</a>
            <a href="">购买指南</a>
            <a href="">支付方式</a>
            <a href="">配送与说明</a>
          </div>
          <div class="helper-box contact-box">
            <div class="helper-title">联系我们</div>
            <p class="phone">400-6822-360</p>
            <p class="time">周一至周日 9:00-18:00（仅收市话费）</p>
          </div>
        </div>
      </div>
      <div class="copyright-floor">
        <div class="footer-box">
          <div class="service-policy-list">
            <a href="">
              <i class="iconfont icon-caigoutuihuodan"></i>
              7天无理由退货
            </a>
            <a href="">
              <i class="iconfont icon-huanhuodan"></i>
              15天免费换货
            </a>
            <a href="">
              <i class="iconfont icon-baoyou"></i>
              满99元包邮
            </a>
          </div>
          <div class="copyright-line">
            <p>©2019-2021 mall.360.cn版权所有</p>

            <p>京ICP备08010314号-6 营业执照</p>
            <p>
              公司名称：北京视觉世界科技有限公司 |
              社会统一信用代码：91110105336460203N | 食品经营许可证
            </p>
            <p>
              公司地址：北京市朝阳区酒仙桥路6号院2号楼1至17层102号内5层501 |
              联系方式：400-6822-360
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="right-side">
      <div class="right-middle-box">
        <a href="" class="js_coupon">
          <i class="iconfont icon-youhuiquan"></i>
          <div class="right-hover-box">
            <span class="item-title">优惠券</span>
          </div>
        </a>
        <a href="">
          <i class="iconfont icon-xiaoxi"></i>
          <div class="right-hover-box">
            <span class="item-text">意见反馈</span>
          </div>
        </a>
        <a href="">
          <i class="iconfont icon-wechat"></i>
          <div class="right-hover-box wx">
            <div class="wx-img">
              <img src="../images/wx.png" alt="" />
            </div>
            <span class="item-text">关注公众号</span>
          </div>
        </a>
        <a href="">
          <i class="iconfont icon-kefu"></i>
          <div class="right-hover-box">
            <span class="item-text">在线客服</span>
          </div>
        </a>
      </div>
      <div class="right-bottom-box">
        <a href="">
          <i class="iconfont icon-ziyuanxhdpi"></i>
          <!-- <div class="right-hover-box">
            <span class="item-text"></span>
          </div> -->
        </a>
        <a href="" class="backtop">
          <i class="iconfont icon-fanhuidingbu"></i>
          <div class="right-hover-box">
            <span class="item-text">返回顶部</span>
          </div>
        </a>
      </div>
      <div class="right-coupon-box">
        <div class="top-bar-placeholder"></div>
        <div class="right-coupon-box-title">
          <i class="iconfont icon-close"></i>
        </div>
        <div class="right-coupon-box-content">
          <div class="coupon-list">
            <div class="coupon-item g-coupon-item">
              <a href="" class="coupon-item-right">
                <b>立即领取</b>
              </a>
              <div class="coupon-item-content">
                <div class="c-item-label">商品券</div>
                <div class="coupon-item-price">
                  <div class="coupon-item-num"><b>¥</b>5.00</div>
                  <div class="coupon-item-desc">满99.00可用</div>
                </div>
                <p
                  class="coupon-item-intro"
                  title="黑金专享全品券（限时购，特殊商品除外）"
                >
                  <span class="c-item-tag c-item-tag-vip">黑金</span>
                  黑金专享全品券（限时购，特殊商品除外）
                </p>
                <p class="coupon-item-time">2020.7.1-2022.1.1</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script
      src="../javascripts/library/require.js"
      data-main="../javascripts/product-info.js"
    ></script>
    <script src="../javascripts/library/jquery.js"></script>
    <script src="../javascripts/mask.js"></script>
    <script src="../javascripts/users.js"></script>
  </body>
</html>
